<template>
  <div class="logout-container">
    <div class="logout-content">
      <!-- Logo 区域 -->
      <div class="logo-container">
        <img src="@/assets/logo.svg" alt="Logo" class="logo-image" />
        <h1 class="system-title">数据标注管理系统</h1>
      </div>

      <el-card class="logout-card">
        <el-result
          icon="success"
          title="安全退出"
          sub-title="您已成功退出系统，感谢使用！"
        >
          <template #extra>
            <el-button 
              type="primary" 
              class="login-button" 
              @click="goToLogin"
            >
              <el-icon class="login-icon"><ArrowRight /></el-icon>
              返回登录
            </el-button>
          </template>
        </el-result>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

defineOptions({
  name: 'LogoutPage'
})

const router = useRouter()
const authStore = useAuthStore()

onMounted(() => {
  authStore.logout()
  ElMessage.success('已安全退出系统')
})

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.logout-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e5799 0%, #207cca 51%, #2989d8 100%);
  padding: 20px;
}

.logout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.logo-container {
  text-align: center;
  margin-bottom: 1rem;
}

.logo-image {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}

.system-title {
  color: white;
  font-size: 28px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logout-card {
  width: 420px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

:deep(.el-result) {
  padding: 24px;
}

:deep(.el-result__icon) {
  margin-bottom: 20px;
}

:deep(.el-result__title) {
  color: var(--el-color-primary);
  font-size: 24px;
  margin: 0 0 8px 0;
}

:deep(.el-result__subtitle) {
  color: #909399;
  font-size: 16px;
  line-height: 1.6;
}

.login-button {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  transition: transform 0.2s;
}

.login-button:hover {
  transform: translateY(-2px);
}

.login-icon {
  margin-right: 8px;
}

@media (max-width: 480px) {
  .logout-card {
    width: 100%;
  }
}
</style> 